<template>
	<view class="page">
		<view class="text">定额充值</view>
		<view class="money-list-flex">
			<view class="money-items " :class="{'active': currentItem === index}" v-for="(item,index) in packageChoose" :key="index" @click="changeState(index, item[0], item[1])">
				<view class="items">
					<view class="text2">{{ item[0] }}</view>
					<view class="text3">元</view>
				</view>
			</view>
		</view>
		<!-- <view class="text7">其他金额</view>
		<view class="money-other">
			<u-input v-model="definedPrice" type="numer" class="ph-t" clearable placeholder="请输入其他金额" />
		</view> -->
		<view class="btn" @click="btnActionRecharge()">确认充值</view>
		<passWordDialog :uShow="uShow" :isSetPaw="isSetPaw" @hide="hide" @investOrder="investOrder"/>
		<paymentMethod2 :uShow="isPayShow" :params="params" @hide="hide"/>
	</view>
</template>

<script>
	import passWordDialog from '@/components/passWordDialog.vue'
	import paymentMethod2 from '@/components/paymentMethod2.vue'
	export default{
		components:{
			passWordDialog,
			paymentMethod2
		},
		data(){
			return{
				currentItem:0,
				definedPrice:'',
				isPayShow:false,
				price: 0,
				uShow:false,
				isSetPaw:false,
				giftBalance: 0,
				params:{
					price:50
				},
				packageChoose:[]
			}
		},
		created() {
			this.$api.account({iccid: uni.getStorageSync('iccid') || ''}).then(res=>{
				this.isSetPaw = res.data.isOpenAccount === 1 ? false : true
			})
			this.init()
		},
		onShow(){
			if(uni.getStorageSync('orderNo')) {
				this.orderChange(uni.getStorageSync('orderNo'))
			}
		},
		methods:{
			//查询支付结果
			orderChange(orderId){
				this.$api.orderState({orderNo:orderId}).then(res=>{
					if(res.code === '200'){
						uni.showModal({
							title:"支付通知",
							content:"您已完成支付！请稍后刷新页面查询到账",
							success(ress){
								uni.switchTab({
									url:"/pages/index/index"
								})
							}
						})
					}else{
						// uni.showToast({
						// 	title: orderId + res.message,
						// 	icon: 'none'
						// })
					}
				})
			},
			//数据初始化
			init(){
				this.$api.uniorderParam({iccid: uni.getStorageSync('iccid') || ''}).then(res=>{
					if(res.code === '200'){
						for (let i=0; i < res.data.length; i++) {
							let itme = [res.data[i].amount, res.data[i].amount+res.data[i].giftBalance];
							this.packageChoose.push(itme);
						}
						this.price = this.packageChoose[0][0];
						this.giftBalance = (this.packageChoose[0][1] - this.packageChoose[0][0])*100;
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			changeState(currentItem, price, giftBalance){
				this.currentItem = currentItem;
				this.price = price;
				this.type="recharge"
				this.giftBalance = (giftBalance - price)*100;
			},
			hide(){
				this.uShow=false
				this.isPayShow = false
			},
			btnActionRecharge(){
				this.price = this.definedPrice ? this.definedPrice : this.price
				if(this.isSetPaw){
					this.uShow = true
					return
				}
				this.investOrder()
			},
			investOrder(payPass){
				this.params = {
					iccid: uni.getStorageSync('iccid') || '',
                    amount: this.price * 100,
					price: this.price ,
					payPass:payPass || '',
                    giftBalance: this.giftBalance,
                    mobile: uni.getStorageSync('userPhone') || ''
				}
				this.uShow=false
				this.isPayShow = true
			}
		}
	}
</script>

<style scoped lang="scss">
	view{
	    display: flex;
	    flex-grow: 0;
	    flex-basis: auto;
	    align-items: stretch;
	    flex-direction: column;
	}
	.page{
		height:100vh;
		background: #f7f8fa;
	    .text{
	        font-size: 16px;
	        color: #06121e;
	        margin-top: 16px;
	        width: 340px;
	        align-self: center;
	    }
	    .money-list-flex{
	        width: 90%;
	        align-self: center;
	        flex-direction: row;
	        flex-wrap: wrap;
	        justify-content: space-between;
	        margin-top: 14px;
	        .money-items{
	            align-items: center;
	            width: 31%;
	            flex-shrink: 0;
	            border: 1px solid rgba(52,118,254,.1);
	            border-radius: 4px;
	            padding: 20px 0 20px;
	            margin-bottom: 14px;
	            .items{
	                flex-direction: row;
	                justify-content: center;
	                align-items: flex-end;
	                .text2{
	                    font-size: 26px;
	                    color: #3476fe;
	                    font-weight: 500;
	                    line-height: 23px;
	                }
	                .text3{
	                    font-size: 14px;
	                    color: #3476fe;
	                    font-weight: 500; 
	                }
	            }
	        }
	        .active{
	            background-color: rgba(52,118,254,.1);
	        }
	    }
	    .text7{
	        width: 90%;
	        align-self: center;
	        font-size: 16px;
	        color: #8c9198;
	    }
	    .money-other{
	        width:90%;
	        background: none;
	        align-self: center;
	        height: 40px;
	        border-bottom: 1px solid #eee;
	        justify-content: center;
	        margin-top: 13px;
	        .u-input{
	            background: none;
	            font-size:16px;
	            color:#808080;
	            padding-left: 0;
	        }
	    }
	    .btn{
	        width: 200px;
	        height: 47px;
	        border-radius: 94px;
	        font-size: 16px;
	        line-height: 47px;
	        margin-top: 66px;
	        align-self: center;
	        border: 0;
	        background: #3476fe;
	        color: #fff;
	        text-align: center;
	    }
	}
</style>